<template>
    <div>
        <div class="main-box" style="padding-top: 20px;">
            <div class="main-le fl">

                <div class="banner">
                    <!-- <Swiper>
                        <Slide>
                            <img src="http://shfjw.org/uploads/171019/1-1G019162341342.jpg" width="600" height="336" alt="">
                        </Slide>
                        <Slide>
                            <img src="http://shfjw.org/uploads/171019/1-1G019162341342.jpg" width="600" height="336" alt="">
                        </Slide>
                        <Slide>
                            <img src="http://shfjw.org/uploads/171019/1-1G019162341342.jpg" width="600" height="336" alt="">
                        </Slide>
                    </Swiper> -->
                    <!-- <slider :pages="pages" @tap="imgclick" :sliderinit="sliderinit"> -->
    <!-- slot  -->
  <!-- </slider> -->
    <swiper v-if="pages.length > 1" :options="swiperOption" ref="mySwiper">
    <!-- slides -->
    <swiper-slide v-for="item in this.pages" :key="item.index" @click.native="swiperClick(item)">
      <img :src="item.style.background" width="100%" height="400px" alt="">
      <div class="tip">{{item.style.title}}</div>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
                </div>
                <div class="home-column tab1-type pt20">
                    <span class="fr" @click="charityCollecting()">更多 &gt;&gt;</span>
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="慈悲喜捨" name="first"></el-tab-pane>
                    </el-tabs>
                </div>
                <div class="new-pic-list">
                    <dl v-for="(item, index) in cibeixishe"  @click="gotodetails(item)" v-if='index<=2' :key="item.index">
                        <dt @click="gotodetails(item)">
                            <a><img :src="'http://img.shanghaifoxie.com' + item.pic" width="190" height="120" alt=""></a>
                        </dt>
                        <dd>
                            <h3 @click="gotodetails(item)">
                                <a>{{item.title}}</a>
                            </h3>
                            <div class="con">{{item.remark.substr(0,50)}}
                                <a @click="gotodetails(item)" class="more">[详情]</a>
                            </div>
                        </dd>
                    </dl>
                </div>
            </div>
            <div class="main-ri fr">
                <div class="home-column tab2-type">
                    <span class="fr" @click="charityClick()">更多 &gt;&gt;</span>
                    <el-tabs v-model="activeName2" @tab-click="handleClick">
                        <el-tab-pane label="慈善新闻" name="first">
                            <div class="main-ri-list1">
                                <ul>
                                    <li v-for="(item, index) in cibeixinwen" @click="gotodetails(item)" v-if='index<=7' :key="item.index">
                                        <h3 @click="gotodetails(item)">
                                            <a>{{item.title}}</a>
                                        </h3>
                                        <div class="con">{{item.remark.substr(0,50)}}
                                            <a @click="gotodetails(item)" class="more">[详情]</a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </el-tab-pane>
                        <!-- <el-tab-pane label="历届会长" name="second">
                            <div class="main-ri-list1">
                                <ul>
                                    <li v-for="(item, index) in lijielingdao" @click="gotodetails(item)" v-if='index<=2' :key="item.index">
                                        <h3 @click="gotodetails(item)">
                                            <a>{{item.title}}</a>
                                        </h3>
                                        <div class="con">{{item.remark.substr(0,50)}}
                                            <a @click="gotodetails(item)" class="more">[详情]</a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </el-tab-pane> -->
                    </el-tabs>
                </div>

                <!-- <div class="lists pt0">
                    <ul>
                        <li class="sz18">
                            <a >宗教事务条例拟修订 禁止以宗教名义进行商...</a>
                        </li>
                        <li>
                            <a >国宗局发布“两个办法” 完善宗教院校法规</a>
                        </li>
                        <li>
                            <a >国宗教局关于在全国宗教界开展“宗教慈善周...</a>
                        </li>
                        <li>
                            <a >宗教事务条例拟修订 禁止以宗教名义进行商...</a>
                        </li>
                        <li>
                            <a >国宗局发布“两个办法” 完善宗教院校法规</a>
                        </li>
                        <li class="sz18">
                            <a >国宗教局关于在全国宗教界开展“宗教慈善周...</a>
                        </li>
                        <li>
                            <a >宗教事务条例拟修订 禁止以宗教名义进行商...</a>
                        </li>
                        <li>
                            <a >国宗局发布“两个办法” 完善宗教院校法规</a>
                        </li>
                        <li>
                            <a >国宗教局关于在全国宗教界开展“宗教慈善周...</a>
                        </li>
                        <li>
                            <a >宗教事务条例拟修订 禁止以宗教名义进行商...</a>
                        </li>
                    </ul>
                </div> -->
            </div>
        </div>
    </div>
</template>

<script>
// import { Swiper, Slide } from 'vue-swiper-component';
// import slider from 'vue-concise-slider'; // 引入slider组件
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';

export default {
  data() {
    return {
      swiperOption: {
        // some swiper options/callbacks
        // 所有的参数同 swiper 官方 api 参数
        // ...
        notNextTick: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        autoplay: {
          delay: 2500,
          disableOnInteraction: false
        },
        loop: true,
        preventLinksPropagation: true,
        paginationClickable: true,
        mousewheelControl: true
      },
      pages: [],
      sliderinit: {
        currentPage: 0, // 当前页码
        thresholdDistance: 100, // 滑动判定距离
        thresholdTime: 100, // 滑动判定时间
        autoplay: 3000, // 自动滚动[ms]
        loop: true, // 循环滚动
        direction: 'horizontal', // 方向设置，垂直滚动
        infinite: 1, // 无限滚动前后遍历数
        slidesToScroll: 1 // 每次滑动项数
      },
      activeName: 'first',
      activeName2: 'first',
      request: {
        pageNo: '0',
        pageSize: '10',
        indexType: '5'
      },
      cibeixishe: [],
      // xianrenhuizhang: [],
      // lijielingdao: [],
      cibeixinwen: []
    };
  },
  created() {
    this.init();
    this.$parent.activeIndex2 = '5';
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  mounted() {
    // current swiper instance
    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    // this.swiper.slideTo(3, 1000, false);
  },
  methods: {
    init() {
      this.$http({
        method: 'get',
        url: `http://www.shanghaifoxie.com/web/api/pageIndex`,
        params: this.request
      })
        .then(response => {
          if (response.data !== null) {
            let imgs = response.data.data.image;
            for (let i = 0; i < imgs.length; i++) {
              this.pages.push({
                style: {
                  background: 'http://img.shanghaifoxie.com' + imgs[i].pic,
                  id: imgs[i].id,
                  title: imgs[i].title
                }
              });
            }
            let dataArr = response.data.data.list;
            for (let i = 0; i < dataArr.length; i++) {
              if (dataArr[i].type === 35) {
                // 慈悲喜捨
                this.cibeixishe = dataArr[i].data;
              }
              if (dataArr[i].type === 34) {
                // 慈悲新闻
                this.cibeixinwen = dataArr[i].data;
              }
              // if (dataArr[i].type === 19) {
              //   // 现任会长
              //   this.xianrenhuizhang = dataArr[i].data;
              // }
              // if (dataArr[i].type === 20) {
              //   // 历届会长
              //   this.lijielingdao = dataArr[i].data;
              // }
            }
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
    swiperClick(item) {
      this.$router.push({
        path: `/details/${item.style.id}`
      });
    },
    imgclick(item) {
      this.$router.push({
        path: `/details/${this.pages[item.currentPage].style.id}`
      });
    },
    handleClick(tab) {
    },
    // 现任会长  历届会长
    charityClick() {
      if (this.activeName2 === 'first') {
        this.$router.push({ path: `/pageList/${'34'}` });
      }
      // if (this.activeName2 === 'second') {
      //   this.$router.push({ path: `/pageList/${'20'}` });
      // }
    },
    // 慈悲喜捨
    charityCollecting() {
      let type = 35;
      this.$router.push({ path: `/pageList/${type}` });
    },
    gotodetails(item) {
      this.$router.push({ path: `/details/${item.id}` });
    }
  },
  // components: {
  //   // Swiper
  //   slider
  // }
  components: {
    swiper,
    swiperSlide
  }
};
</script> 

<style lang="less">
.fr {
  float: right;
}
.fl {
  float: left;
}
.pt20 {
  padding-top: 20px;
}
.pt0 {
  padding-top: 0px !important;
}
.sz18 {
  font-size: 18px !important;
  font-weight: bold !important;
}
.main-box {
  height: auto;
  overflow: hidden;
  padding-bottom: 20px;
  .main-le {
    width: 600px;
    .banner {
      height: 400px;
      width: 600px;
      overflow: hidden;
      position: relative;
      border: 1px solid #ddd;
    }
    .new-pic-list {
      padding-top: 20px;
      height: auto;
      overflow: hidden;
      dl {
        width: 190px;
        float: left;
        margin-right: 15px;
        dd {
          h3 {
            line-height: 24px;
            padding: 8px 0 4px 0;
            font-size: 16px;
            color: #000;
            font-weight: normal;
          }
          .con {
            line-height: 20px;
            height: 80px;
            overflow: hidden;
          }
        }
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
  .main-ri {
    width: 380px;
    .main-ri-list1 {
      // height: 284px;
      padding-top: 6px;
      overflow: hidden;
      li {
        list-style: none;
        padding: 12px 0;
        h3 {
          height: 28px;
          line-height: 28px;
          padding-bottom: 4px;
          overflow: hidden;
          font-size: 18px;
          color: #000;
          font-weight: normal;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .con {
          height: 36px;
          line-height: 18px;
          overflow: hidden;
        }
      }
    }
    .lists {
      ul {
        li {
          height: 36px;
          line-height: 36px;
          font-size: 14px;
          position: relative;
          padding-left: 12px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          &::before {
            position: absolute;
            left: 0;
            top: 18px;
            content: '';
            width: 4px;
            height: 4px;
            background-color: #dd9b1e;
          }
        }
      }
    }
  }
}
</style>